<template>
  <div class="zhece">
    <div class="zcform">
      <form @submit.prevent="zheceVuex">
        <p>
          <input type="text" v-model="uname" placeholder="请输入注册姓名" required>
        </p>
        <aside>
            <input type="number" v-model="phone" placeholder="请输入手机号" pattern="/^1[3456789]\d{9}$/" required>
        </aside>
        <p>
          <input type="email" v-model="email" placeholder="请输入邮箱" pattern="^\w+@[a-z0-9]+\.[a-z]{2,4}$" required>
        </p>
        <p>
          <input type="text" v-model="pwd" placeholder="请输入密码" required>
        </p>
        <p>
          <input type="text" v-model="qrpwd" placeholder="再次确认密码" required>
        </p>
        <p>
        <input type="checkbox" v-model="isRem" style="width:20px;height:15px" required>
        <span>是否同意本系统服务条款</span>
       </p>
        <article>
          <input type="submit" value="添加数据" @click="tj()">
          <input type="submit" value="立即登录" @click="dl()">
        </article>
      </form>
    </div>
  </div>
</template>

<script>
import { mapMutations } from 'vuex'
export default {
  name:'ZheCe',
  //所有控件必填；两次密码必须一致  ===> 添加数据到vuex里面
  //用户自己去跳转
data(){
  return{
    objF:{
    uname:'',
    phone:'',
    email:'',
    pwd:'',
    qrpwd:'',      
    },
    isRem:false,
  }
},
methods:{
  ...mapMutations(['zhuce']),
  tj(){
    if(this.pwd==this.qrpwd){
      this.zhuce(this.objF)
      console.log(this.$store.state.user);
      
    }
    else{
      alert('有空缺')
    }
  },
  dl(){
      if(this.pwd==this.qrpwd){
      this.zhuce(this.objF)
      localStorage.setItem('loginuser',this.username);
      localStorage.setItem('loginpwd',this.pwd);
      sessionStorage.setItem('islogin', this.username);
     this.$router.push('/login');
  }else{
    alert('有空缺注册失败')
  }
}
}
}
</script>

<style scoped>
.zhuce{
    width: 60%;
    height: 40%;
    color: red;
    font-weight: 600;
}
.zcform{
    width: 600px;
    position:absolute;
    left: 30%;
    top: 40%;
    border: red 10px solid;
    border-radius: 5px;
    text-align: center;
}
input{
    border: none;
    width: 88%;
    height: 20px;
    margin-top: 15px;
}
i{
    font-size: 20px;
    margin-right: 5px;
}
</style>